<template>
	<div class="shipped CommonHeight">
		<navBar>
			<template v-slot:head>
				<image class="headPic" src="../../static/images/Shop/usage.png" mode=""></image>
				<text>交易成功</text>
			</template>
			<template v-slot:subhead>
				收货<text style="color: #fff;margin: 0 5px;">1年</text>内享有所保
			</template>
		</navBar>
		<div class="secureCaseBox">
			<!-- 货物 -->
			<shopPro>
				<template v-slot:shopName>{{product.productName}}</template>
				<template v-slot:countNum>
					<span>*{{product.count}}</span>
					<span>{{product.productPrice}}USDT</span>
				</template>
				<template v-slot:freight>
					<span>运费</span>
					<span>{{product.freightPrice}}USDT</span>
				</template>
				<template v-slot:line>
					<div class="van-hairline--top"></div>
				</template>
				<template v-slot:needToPay>
					<span>需付款</span>
					<!-- 这里应该是计算属性 -->
					<span class='sum'>{{product.productPrice*product.count+product.freightPrice}}USDT</span>
				</template>
			</shopPro>
			<!-- 订单信息 -->
			<orderInfo style="width: 91%;">
				<template v-slot:order>
					<div class="order">
						<span>订单编号</span>
						<div class='colorGray'>
							<span>{{orderNum}}</span>
							<image src="../../static/images/Order/order_copy.png" mode="widthFix"
								@click='copy(orderNum)'></image>
						</div>
					</div>
				</template>
				<template v-slot:address>
					<div class="address">
						<span>收货地址</span>
						<div class='colorGray'>李二狗，13544495068，北京市朝阳区劲松街道华腾园6-1508</div>
					</div>
				</template>
				<template v-slot:timePayment>
					<div class="timePayment">
						<span>支付时间</span>
						<div class='colorGray'>{{store.state.paymentTime}}</div>
					</div>
				</template>
				<template v-slot:closingTime>
					<div class="timePayment">
						<span>交易完成时间</span>
						<div class='colorGray'>{{store.state.paymentTime}}</div>
					</div>
				</template>
				<template v-slot:time>
					<div class="time">
						<span>创建时间</span>
						<span class='colorGray'>{{store.state.createTime}}</span>
					</div>
				</template>
			</orderInfo>
			<!-- 快递单号 -->
			<trackingNum></trackingNum>
			<!-- 物流信息 -->
			<!-- <Logitics></Logitics> -->
			<!-- 联系我们 -->
			<!-- <contactUs></contactUs> -->
		</div>
		<!-- 查看使用情况 -->
		<Operate v-if="store.state.title === '托管'">
			<template v-slot:isReceiveGoods>
				<div class="isReceiveGoods">
					<van-button type="primary" @click='viewUsage2' class="commonBtn">查看设备兑换券的使用情况</van-button>
					<van-button type="primary" @click='viewUsage' class="commonBtn">查看使用情况</van-button>
				</div>
			</template>
		</Operate>
	</div>
</template>

<script setup lang='ts'>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import trackingNum from '../../components/trackingNum/index.vue'
	import {
		copy
	} from '../../utils/copy.ts'
	import type {
		Product
	} from '@/types/product'
	const store = useStore()
	let product: Product = store.state.product
	// copy功能
	const orderNum = ref('168516518165168165')
	// 交易完成时间(同支付时间)
	// const timePayment = computed(() => {
	// 	let date = new Date();
	// 	let year = date.getFullYear();
	// 	let month = date.getMonth() + 1;
	// 	let day = date.getDate();
	// 	let hours = date.getHours();
	// 	let minutes = date.getMinutes();
	// 	let seconds = date.getSeconds();
	// 	let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	// 	console.log(fullDateStr);
	// 	store.commit('savePaymentTimeFn', fullDateStr)
	// 	return fullDateStr
	// })

	// 如果是托管就跳转到使用情况
	const viewUsage = () => {
		uni.navigateTo({
			url: "/subdue/managedUsage/index"
		})
	}

	const viewUsage2 = () => {
		uni.navigateTo({
			url: "/subdue/equipmentUsage/index"
		})
	}
</script>

<style lang='scss' scoped>
	/* .shipped {
		height: 100vh;
	} */
	.commonBtn {
		width: 240px !important;
	}
</style>